<template>
  <div v-loading="listLoading" style="min-height: 100px;">
    <u-table
      v-if="list.items.length > 0"
      ref="channelTable"
      :data="list.items"
      :height="tableHeight"
      :row-height="49"
      :border="false"
      :row-class-name="tableRowClassName"
      use-virtual
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      @select="selectTable"
      @select-all="selectAllTable"
      @sort-change="sortMethod">
      <u-table-column
        fixed="left"
        align="center"
        type="selection"
        width="50"
      />
      <u-table-column align="left" label="订单类型" width="80" prop="orderType">
        <template slot-scope="scope">
          <div
            v-if="scope.row.orderType != null"
            :style="{background: scope.row.bg || 'rgb(253, 239, 233)', color: scope.row.color || 'rgb(253, 133, 70)'}"
            class="ellipsis order-type"
          >{{ scope.row.orderType | orderTypeStatusFilter }}</div>
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="订单编号" min-width="180" prop="orderId">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.orderId" :content="scope.row.orderId">
            <router-link
              :to="{name: 'orderDetail', params: { orderId: scope.row.orderInfo.id }}"
              target="_blank"
              class="overflow ellipsis"
              style="color:#406EFF"
            >{{ scope.row.orderId }}</router-link>
          </ToolTip>
          <div v-else style="color:#406EFF; cursor: pointer" @click="goOrderDetail(scope.row.orderInfo.id)">--</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="下单日期" width="120" prop="orderTime">
        <template slot-scope="scope">
          <div v-if="scope.row.orderTime" class="ellipsis">{{ scope.row.orderTime | standardFormatNoHour('YYYY/MM/DD') }}</div>
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column
        :sortable="(showUnWriteOffAmount || showCompleteWriteOffAmount) && 'custom'"
        align="right"
        label="含税金额(元)"
        min-width="130"
        prop="taxAmount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.taxAmount" :price="scope.row.taxAmount / 100" />
        </template>
      </u-table-column>
      <u-table-column
        v-if="showUnWriteOffAmount"
        align="right"
        label="待核销金额(元)"
        min-width="140"
        sortable="custom"
        prop="unWriteOffAmount">
        <template slot-scope="scope">
          <PriceColumn
            :real-val="scope.row.financeRecord && scope.row.financeRecord.unWriteOffAmount"
            :price="scope.row.financeRecord && scope.row.financeRecord.unWriteOffAmount / 100" />
        </template>
      </u-table-column>>
      <u-table-column
        v-if="showCompleteWriteOffAmount"
        align="right"
        label="已核销金额(元)"
        min-width="140"
        sortable="custom"
        prop="completeWriteOffAmount">
        <template slot-scope="scope">
          <PriceColumn
            :real-val="scope.row.financeRecord && scope.row.financeRecord.completeWriteOffAmount"
            :price="scope.row.financeRecord && scope.row.financeRecord.completeWriteOffAmount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="订单状态" min-width="80" prop="orderStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.orderStatus || scope.row.orderStatus === 0" >
            <div style="display:flex;align-items:center;justify-content: center">
              <span :style="{backgroundColor: getColor(scope.row.orderStatus)}" class="dot"/>
              {{ scope.row.orderStatus | orderStatusFilter }}
            </div>
            <!-- 订单状态为封账中(5)时，展示审批状态 -->
            <div v-if="scope.row.orderStatus === 5" style="display:flex;justify-content: center;">
              <el-tag v-if="scope.row.reviewState === 0" size="small" type="success">{{ scope.row.reviewState | setReviewState }}</el-tag>
              <el-tag v-if="scope.row.reviewState === 1" size="small">{{ scope.row.reviewState | setReviewState }}</el-tag>
              <el-tag v-if="scope.row.reviewState === 2" size="small" type="danger">{{ scope.row.reviewState | setReviewState }}</el-tag>
            </div>
          </div>
          <span v-else>--</span>
        </template>
      </u-table-column>
      <u-table-column align="left" label="账号" min-width="150" prop="resourceName">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <frameContent
              v-if="scope.row.dataAccount"
              :platform="scope.row.orderPlatform || scope.row.accountNamePlatform"
              :data-account="scope.row.dataAccount"
              :url="scope.row.dataLink"
              :account-id="scope.row.orderInfo.resourceId"
              :account-name="scope.row.orderInfo.resourceName"
            />
            <resource-info
              v-if="scope.row.orderInfo && scope.row.orderInfo.resourceType !== 1 && scope.row.orderInfo.resourceType !== 2"
              :resource-name="scope.row.resourceName"
              :account-name-organization="scope.row.accountNameOrganization"
              :account-name-platform="scope.row.accountNamePlatform"
              :resource-id="scope.row.orderInfo && scope.row.orderInfo.resourceCode"
              account-belong-name="none"
            />
            <span v-else-if="scope.row.orderInfo && scope.row.orderInfo.resourceType === 1">多账号</span>
            <span v-else-if="scope.row.orderInfo && scope.row.orderInfo.resourceType === 2">无号单</span>
          </div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="品牌名称" min-width="110" prop="theme">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.theme && scope.row.theme.length > 5" :content="scope.row.theme"/>
          <div v-else>{{ scope.row.theme || '--' }}</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="下单平台" min-width="100" prop="orderPlatform">
        <div slot-scope="scope" class="flex-center">
          <platformIcon :data="scope.row.orderPlatform" />
          <ToolTip :content="scope.row.orderPlatform" class="client-name"/>
        </div>
      </u-table-column>
      <u-table-column align="left" label="下单形式" min-width="100" prop="orderForm">
        <div slot-scope="scope" class="flex-center" style="justify-content: center">
          <ToolTip :content="scope.row.orderInfo && scope.row.orderInfo.orderForm"/>
        </div>
      </u-table-column>
      <u-table-column align="left" label="所属部门" width="110" prop="attributionMatrix">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.orderInfo && scope.row.orderInfo.attributionMatrixName" :content="(scope.row.orderInfo.attributionMatrixFullName || scope.row.orderInfo.attributionMatrixName) | getDeptFullName">
            <div class="overflow ellipsis">{{ scope.row.orderInfo.attributionMatrixName }}</div>
          </ToolTip>
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="执行人" min-width="100" prop="orderOperator">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.orderInfo && scope.row.orderInfo.orderOperator && scope.row.orderInfo.orderOperator.length" :content="getOrderOperator(scope.row.orderInfo.orderOperator)"/>
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="客户名称" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.clientName"/>
        </template>
      </u-table-column>
      <u-table-column align="left" label="销售" min-width="100" prop="market">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.market" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="客户结算单" width="192">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.clientInfo" :content="scope.row.clientInfo.clientSettlementId" />
          <div v-else>--</div>
        </template>
      </u-table-column>
    </u-table>
    <empty-placeholder v-else style="margin-bottom: 24px" />
  </div>
</template>

<script>
import tableSelections from '../mixins/relatedSelection';
import { orderTypeStatusFilter, setReviewState } from '@/filters/status';
import { getDeptFullName } from '@/filters/dept';
import { standardFormat, standardFormatNoHour } from '@/filters/date';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import frameContent from '@/components/Common/frameContent';
import platformIcon from '@/components/Common/platformIcon';
import ResourceInfo from '@/components/ResourceInfo';
export default {
  name: 'ChannelOrder',
  filters: {
    getDeptFullName,
    standardFormat,
    orderTypeStatusFilter,
    standardFormatNoHour,
    setReviewState,
    orderStatusFilter(status) {
      const arr = ['草稿中', '待发布', '待核算', '待审批', '待封账', '封账中', '已封账', '已完成'];
      return arr[Number(status)];
    }
  },
  components: {
    EmptyPlaceholder,
    frameContent,
    platformIcon,
    ResourceInfo
  },
  mixins: [tableSelections],
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object | Array,
      default: () => {
        return {};
      }
    },
    selectCallback: {
      type: Boolean,
      default: false
    },
    isSelectedOrder: { // 是否为已选择订单
      type: Boolean,
      default: false
    },
    tableHeight: {
      type: String,
      default: ''
    },
    showUnWriteOffAmount: { // 显示待核销金额
      type: Boolean,
      default: false
    },
    showCompleteWriteOffAmount: { // 显示已核销金额
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      idKey: 'id',
      primaryId: 'relatedId',
      isUmyTable: true,
      tableRefName: 'channelTable'
    };
  },
  watch: {
    list: {
      handler: function(data) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(data.items);
        });
      },
      deep: true
    }
  },
  methods: {
    getOrderOperator(users) {
      return users.map(user => user.userName).join();
    },
    goOrderDetail(id) {
      if (!id) {
        this.$message.warning('无效id');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'orderDetail',
        params: { orderId: id }
      });
      window.open(routeUrl.href, '_blank');
    },
    getColor(status) {
      // 订单状态： 0: 草稿中 1: 待发布 2: 待核算 3: 待审批 4: 待封账 5: 封账中 6: 已封账 7: 已完成
      let color = '';
      switch (status) {
        case 0:
          color = '#406EFF';
          break;
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
          color = '#FD8546';
          break;
        case 6:
        case 7:
          color = '#31CC9C';
          break;
      }
      return color;
    },
    sortMethod(e) {
      let sortName = '';
      let sortType = '';
      if (e.order) {
        sortName = e.prop;
        sortType = e.order === 'ascending' ? 1 : -1;
      }
      this.$emit('tableSort', { sortName, sortType });
    }
  }
};
</script>

<style scoped lang="scss">
.table-selected {
  td {
    background-color: #F3F5FB;
  }
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
}
.el-table {
  color: #333 !important;
  .order-type {
    padding: 0 5px;
    height:24px;
    border-radius: 16px;
    display: flex;
    font-size: 14px;
    justify-content: center;
    align-content: center;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
  .client-name {
    width: 100%;
  }
  .resource-name {
    width: 120px;
  }
  .diy-header {
    display: flex;
    align-items: center;
    .order-setting {
      cursor: pointer;
      font-size: 18px;
    }
  }
}
</style>
